/* eslint-disable jsx-quotes */
/*
 * @Description: 注册
 * @Author: mengjiajun
 * @Date: 2023-12-14 14:48:01
 * @LastEditors: mengjiajun
 * @LastEditTime: 2023-12-14 16:31:17
 * @FilePath: \foodstuff-safety-responsibility\src\pages\Auth\Register\index.tsx
 */

import { Field, Form, FormItem, Area, Popup, Picker } from "@antmjs/vantui";
import { Input, View, Text } from "@tarojs/components";
import { useState } from "react";
import { areaList } from "@vant/area-data";

const Register: React.FC = () => {
  const [formInfo, setFormInfo] = useState({
    subjectName: "",
    code: "",
    subjectType: undefined,
    linkMan: "",
    linkManPhone: "",
    password: "",
    repeatPassword: "",
    area: undefined,
    detailAddress: "",
  });

  const registerOptions = [
    {
      placeHolder: "请填写营业执照上的主体名称",
      required: true,
      key: "subjectName",
      type: "input",
    },
    {
      placeHolder: "请填写营业执照同意社会信用代码",
      required: true,
      key: "code",
      type: "input",
    },
    {
      placeHolder: "请选择企业主体类型",
      required: true,
      key: "subjectType",
      type: "picker",
      options: ["食品生产", "食品流通", "餐饮服务"],
    },
    {
      placeHolder: "请输入联系人",
      required: false,
      key: "linkMan",
      type: "input",
    },
    {
      placeHolder: "请输入联系人电话",
      required: true,
      key: "linkManPhone",
      type: "input",
    },
    {
      placeHolder: "请输入登录密码",
      required: true,
      key: "password",
      type: "input",
    },
    {
      placeHolder: "请输入登录密码",
      required: true,
      key: "repeatPassword",
      type: "input",
    },
    {
      placeHolder: "请选择企业所在地区",
      required: true,
      key: "area",
      type: "area",
    },
    {
      placeHolder: "请输入详细地址",
      required: false,
      key: "detailAddress",
      type: "input",
    },
  ];

  const [pickerShow, setPickerShow] = useState(false);
  const [pickerOptions, setPickerOptions] = useState<string[]>([]);
  const [curSelectKey, setCurSelectKey] = useState("");

  const [areaShow, setAreaShow] = useState(false);
  return (
    <View className="text-[32px] px-2 flex flex-col">
      <View className="text-[24px] mb-3 px-2">
        许可证号/手机号均可作为系统登录账号
      </View>
      {registerOptions.map((_item) =>
        _item.type === "input" ? (
          <View
            className="h-[80px] leading-[80px] border-b border-solid border-gray-300 flex gap-1"
            key={_item.key}
          >
            <Text
              className={
                _item.required ? "text-red-500 " : "text-[rgba(0,0,0,0)]"
              }
            >
              *
            </Text>
            <Input
              className="flex-1 h-full"
              type={
                ["password", "repeatPassword"].includes(_item.key)
                  ? "safe-password"
                  : "text"
              }
              placeholder={_item.placeHolder}
              value={formInfo[_item.key]}
              onInput={(e) => {
                const _formInfo = { ...formInfo };
                _formInfo[_item.key] = e.detail.value;
              }}
            />
          </View>
        ) : _item.type === "picker" ? (
          <View
            className="h-[80px] leading-[80px] border-b border-solid border-gray-300 flex gap-1"
            key={_item.key}
          >
            <Text
              className={
                _item.required ? "text-red-500 " : "text-[rgba(0,0,0,0)]"
              }
            >
              *
            </Text>
            <Input
              className="flex-1 h-full"
              placeholder={_item.placeHolder}
              type="text"
              disabled
              value={formInfo[_item.key]}
              onClick={() => {
                setCurSelectKey(_item.key);
                setPickerOptions(_item.options!);
                setPickerShow(true);
              }}
            />
          </View>
        ) : _item.type === "area" ? (
          <View
            className="h-[80px] leading-[80px] border-b border-solid border-gray-300 flex gap-1"
            key={_item.key}
          >
            <Text
              className={
                _item.required ? "text-red-500 " : "text-[rgba(0,0,0,0)]"
              }
            >
              *
            </Text>
            <Input
              className="flex-1 h-full"
              placeholder={_item.placeHolder}
              type="text"
              disabled
              value={formInfo[_item.key]}
              onClick={() => {
                setCurSelectKey(_item.key);
                setAreaShow(true);
              }}
            />
          </View>
        ) : null
      )}

      <Text
        className="h-[90px] w-full rounded bg-[#1677FF] flex justify-center items-center text-white mt-6"
        onClick={() => {
          console.log("注册");
        }}
      >
        注册
      </Text>

      {/* 下拉列表选择 */}
      <Popup
        show={pickerShow}
        position="bottom"
        onClose={() => setPickerShow(false)}
      >
        <Picker
          columns={pickerOptions}
          onChange={(e) => {
            console.log(e, curSelectKey);
          }}
        />
      </Popup>

      {/* 省市区选择 */}
      <Popup
        show={areaShow}
        position="bottom"
        onClose={() => setAreaShow(false)}
      >
        <Area
          areaList={areaList}
          onChange={(e) => {
            console.log(e, curSelectKey);
          }}
        />
      </Popup>
    </View>
  );
};

export default Register;
